$(function () {
  var dataLeft1 = [
      {name: '西湖区', id: 1},
      {name: '上城区', id: 2},
      {name: '拱墅区', id: 3},
      {name: '余杭区', id: 4},
      {name: '滨江区', id: 5},
      {name: '萧山区', id: 6},
      {name: '桐庐区', id: 7},
      {name: '临平区', id: 8},
      {name: '钱塘区', id: 9},
      {name: '富阳区', id: 10},
      {name: '临安区', id: 11},
      {name: '淳安县', id: 12},
      {name: '建德市', id: 13},
    ],
    fnBackLeft1= function (result) {
      console.log(result.name + ' ' + result.id);
    };
  new SelectBox($('#leftSelect1'), dataLeft1, fnBackLeft1,
    {
      color: '#fff',//输入框字体颜色
      optionColor: '#fff',//下拉框字体颜色
      arrowColor: '#fff',//箭头颜色
      backgroundColor: '#023AFF',//背景色颜色
      borderColor: '#023AFF',//边线颜色
      hoverColor: '#023AFF',//下拉框HOVER颜色
      borderWidth: 1,//边线宽度
      optionMaxHeight:205,
      defalut: 'firstData',//默认显示内容。如果是'firstData',则默认显示第一个
      arrowBorderWidth: 0,//箭头左侧分割线宽度。如果为0则不显示
      borderRadius: 5,//边线圆角
      height: 30,//高
      width:111,
      textIndent:7,
      placeholder: 'box6',//默认提示
    }
  );

  //出租率运营图
  var rentOption = function(){
    return{
      legend: {
        data: ['整租', '合租'],
        top:10,
        left: 0,
        icon: "circle",
        itemGap:25,
        textStyle: {
          color: '#fff',
          fontSize:14,
          fontWeight: 400
        },
      },
      grid: {
        left:'1%',
        right: "4%",
        bottom:'10%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor:'#fff',
        textStyle:{
          color:'#000',
          lineHeight:'24px',
        },
        padding:[15,20,15,20],
        //label格式化
        formatter : function(params){
          if(params.length > 0 ){
            let h1 = `<div style="font-size:18px;font-weight:600;margin-bottom:6px">${params[0].name}</div>`;
            params.forEach((item,index)=>{
              h1+= `<div style="padding-top:5px;padding-bottom:5px;">${item.marker} ${item.seriesName}: ${parseInt(item.data)}</div>`
            })
            return h1;
          }else{
            return ''
          }
        },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      color:['#023AFF','#F94144'],
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            type:"dashed",
            color:  '#4F4F4F',
          }
        },
        axisLabel: {
          color: '#fff',
          fontSize: 14,
          margin: 20,
          align: 'center'
        },

      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            type:"dashed",
            color:'#4F4F4F',
          }
        },
        axisLabel: {
          color: '#fff',
          fontSize: 14,
          margin: 20,
          align: 'center'
        },
      },
      series: [
        {
          name:'整租',
          data: [12, 9.5, 7.5, 8, 5.5, 5],
          type: 'line',
          smooth: true,
          symbol: "circle",
          symbolSize: 8,
          lineStyle: {
            color: '#023AFF',
            width: 3
          },
        },
        {
          name:'合租',
          data: [2, 1.8, 3, 7, 4, 3],
          type: 'line',
          smooth: true,
          symbol: "circle",
          symbolSize: 8,
          lineStyle: {
            color: '#F94144',
            width: 3
          },
        }
      ]
    }
  };

  var leftBox3Dom = document.getElementById('leftBox3');
  let leftBox3Chart = echarts.init(leftBox3Dom);

  leftBox3Chart.setOption(rentOption())
});

$('#checkBtn1').click(function(){
  $('#dialogBg').show();
  $('#dialog1').css('visibility','visible')
})

$('#checkBtn2').click(function(){
  $('#dialogBg').show();
  $('#dialog2').css('visibility','visible')
})
